<script setup lang="ts">
import {object,string, type InferType} from 'yup'
import type {FormSubmitEvent} from '#ui/types'

import {useMessage} from 'naive-ui'

const message = useMessage()
const user = useUserStore()

const emit = defineEmits();

import Article from "~/api/Article";

const article = new Article()

const props = defineProps({
  show: {
    type: Boolean,
    required: true,
    default: false
  },
  articleId: {
    type: String,
    required: true,
    default: ""
  }
})

const state = reactive({
  type: '' as string | undefined,
  content: '' as string | undefined,
  userId: user._id,
  articleId: props.articleId,
})

const loading = ref(false)

const modalFlag = ref(props.show);

watch(() => props.show, (newShow) => {
  modalFlag.value = newShow;
  emit('update:show', newShow);
});

watch(() => modalFlag.value, (newModalFlag) => {
  modalFlag.value = newModalFlag;
  emit('update:show', newModalFlag);
});


const schema = object({
  type: string().required('请选择一个类别'),
})

type Schema = InferType<typeof schema>

const options = [
  {label: '色情低俗',desc:'',  value: '色情低俗'},
  {label: '涉嫌违法犯罪',desc:'',  value: '涉嫌违法犯罪'},
  {label: '时政信息不实',desc:'',  value: '时政信息不实'},
  {label: '垃圾广告',desc:'',  value: '垃圾广告'},
  {label: '低质灌水',desc:'', value: '低质灌水'},
  {label: '人身攻击', desc: '对个人或企业的辱骂、诽谤行为', value: '人身攻击'},
  {label: '冒用抄袭', desc: '您的作品、商标、专利等未经授权被恶意使用）', value: '冒用抄袭'},
  {label: '泄漏隐私', desc: '个人信息、如身份证、银行卡信息等被恶意使用', value: '泄漏隐私'}
]

async function onSubmit(event: FormSubmitEvent<Schema>) {
  loading.value = true
  await article.report(event.data)
  message.success(`感谢你的举报，我们会尽快处理`)

 setTimeout(() => {
   loading.value = false
   emit('update:show', false);
 }, 500)
}
</script>

<template>

  <UModal v-model="modalFlag" >
    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
      <template #header>
        <div class="flex items-center justify-between">
          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
            举报
          </h3>
          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="modalFlag = false" />
        </div>
      </template>
      <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
        <UFormGroup label="类别" name="type">
          <URadioGroup v-model="state.type" :options="options">
            <template #label="{ option }">
              {{ option.label }}
              <span v-if="option.desc.length > 0" class="text-xs">
                （{{ option.desc }}）
              </span>
            </template>
          </URadioGroup>
        </UFormGroup>
        <UFormGroup label="说明" name="content">
          <UTextarea v-model="state.content" type="text" placeholder="详细的说明，有助于我们更快的理解您的反馈。"/>
          <p class="py-4 text-xs font-medium text-gray-700 dark:text-gray-200">我们会通过消息、邮箱等方式尽快将举报结果通知您。</p>
        </UFormGroup>

        <UButton :loading="loading" type="submit">
          举报
        </UButton>
      </UForm>
    </UCard>
  </UModal>

</template>

<style scoped lang="scss">

</style>